<template>
  <!-- 30.1 搭建基础模板 -->
  <div>
    <!-- 34.1 完善[更换头像]界面的模板代码： -->
    <el-card class="box-card">
      <template #header>
        <span>更换头像</span>
      </template>
      <div>
        <!-- <img src="@/assets/images/avatar.jpg" class="the_img"> -->
        <!-- 35.4 改良渲染图片的方式： -->
        <img :src="Avatar" alt="" style="width:350px;"  v-if="Avatar"/>
        <img src="@/assets/images/avatar.jpg" alt=""  v-else />

        <div class="btn-box">
          <!-- 35.1 给真正触发[选择图片]的 file框设置change事件： -->
          <input
           type="file"
           ref="inpPic"
           accept="image/*"
           style="display: none;"
           @change="onIptChange"
          >
          <!-- 34.3 点击[选择图片]按钮, 弹出对应框 -->
          <el-button type="primary" size="medium" @click="selectPic">+ 选择图片</el-button>
          <!-- 34.2 将[上传头像]按钮设为"禁用" -->
          <!-- 细节19：[上传头像]的 禁用属性时机是 → 当没[选择图片]时触发： -->
          <el-button type="success" size="medium" :disabled="Avatar === ''">
            <i class="el-icon-upload"></i>
            <!-- 36.3 点击[上传头像]后, 进行对应调用接口事件 ↓ -->
            <span @click="onAvatar">上传头像</span>
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { updateUserAvatar } from '@/api/index' // 36.2
export default {
  name: 'user-avatar',
  data () {
    return {
      // 35.3 同步：
      // 声明一个变量存储转好的base64进制
      Avatar: ''
    }
  },
  created () {},
  methods: {
    // 34.4 点击[选择图片]按钮,间接触发 file文件输入框：
    selectPic () {
      this.$refs.inpPic.click()
    },
    // 35.2 将选择到的图片, 渲染到页面上：
    onIptChange (e) {
      // 35.2 先测试选择图片后, 能否正常执行：
      // console.log(123)

      // 35.3 使用事件对象e：
      // console.log(e.target.files)
      // 细节18：e.target.files 是个伪数组/可以通过长度判断用户是否选择了图片
      if (e.target.files.length === 0) {
        // 点击了取消了,就恢复默认图片
        this.Avatar = ''
      } else {
        // ① FileReader 浏览器提供的方法
        const reader = new FileReader()
        // ② reader里面有个方法readAsDataURL 可以将图片转base64进制
        reader.readAsDataURL(e.target.files[0])
        // ③ onload可以监听转换完成后
        reader.onload = () => {
          // ④ 给声明变量赋值 ↑
          this.Avatar = reader.result
        }
      }
    },
    // 36.4 上传头像：
    async onAvatar () {
      // 36.5 调用对应更新[用户头像]接口：
      const res = await updateUserAvatar(this.Avatar)
      if (res.code !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      // 36.6 更新 Vuex 数据：
      this.$store.dispatch('getUserInfoActions')
    }
  }
}
</script>

<style lang="less" scoped>

</style>
